<template>
	<view class="flavor-item">
		<view v-for="(item, index) in flavors" :key="index" class="flavor-group">
			<text class="flavor-name">{{ item.name }}</text>
			<view class="flavor-options">
				<view v-for="(option, optionIndex) in item.value" :key="optionIndex" class="flavor-option"
					:class="{ selected: selectedOptions[index] === option }" @click="selectOption(item.dishId,index, option)">
					{{ option }}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		onUnmounted,
		onBeforeUpdate,
		onUpdated,
		ref,
		watch,
		onActivated
	} from 'vue';

	const props = defineProps({
		flavors: {
			type: Array,
			required: true,
		},
		changeSeleced: {
			type: Function, // 参数类型为函数
			required: true, // 必传参数
			default: () => {} // 默认值为空函数
		}
	});

	const selectedOptions = ref(Array(props.flavors.length).fill(''));

	const selectOption = (dishId, index, option) => {
		selectedOptions.value[index] = option;
		props.changeSeleced(dishId, selectedOptions.value)
	};
</script>

<style scoped>
	.flavor-item {
		padding-bottom: 40rpx;
	}

	.flavor-group {
		margin-top: 20rpx;
	}

	.flavor-name {
		font-size: 30rpx;
		font-weight: 500;
		color: #666;
		display: block;
		margin-bottom: 15rpx;
	}

	.flavor-options {
		display: flex;
		flex-wrap: wrap;
		gap: 15rpx;
	}

	.flavor-option {
		padding: 10rpx 20rpx;
		border: 1rpx solid #ddd;
		border-radius: 40rpx;
		font-size: 26rpx;
		background: #f8f8f8;
	}

	.flavor-option.selected {
		border-color: #ff5a5f;
		background: #fff0f0;
		color: #ff5a5f;
	}
</style>